<!--
 * @Author: Cenven
 * @Date: 2021-03-17 11:45:29
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-07-02 15:45:58
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="judgment-question">
    <div class="question-type-title">
      <span class="t-left"
        >判断题
        <template v-if="['2', '3'].includes(testType)">
          （{{ detail.score }}分）
        </template></span
      >
      <span
        class="t-right"
        v-if="
          ['2', '3'].includes(testType) && !detail.is_review && detail.is_answer
        "
        >已作答</span
      >
      <span
        class="t-right"
        style="color: #f39090;"
        v-if="
          ['2', '3'].includes(testType) &&
            !detail.is_review &&
            !detail.is_answer
        "
        >未作答</span
      >
    </div>
    <div class="question-type-content">
      <div class="question-box">
        <template v-if="detail.richTextSwitch == 1">
          <p class="question-title" v-html="detail.question.question"></p>
        </template>
        <template v-else>
          <p class="question-title">
            {{ detail.question.question }}
          </p>
        </template>
        <van-radio-group
          v-model="radio"
          class="redio-group-box"
          @change="handleChange"
          :disabled="detail.is_ban_input"
        >
          <van-radio
            :name="1"
            checked-color="var(--theme-color)"
            :class="[
              detail.answer == 1 && detail.is_show_answer ? 'right-answer' : '',
              radio == 1 ? 'active' : ''
            ]"
            >正确
            <!-- <template #icon="props">
              <van-icon
                name="success"
                :style="{
                  backgroundColor: radio == 1 ? 'var(--theme-color)' : '',
                  borderColor: radio == 1 ? 'var(--theme-color)' : ''
                }"
              />
            </template> -->
          </van-radio>
          <van-radio
            :name="2"
            checked-color="var(--theme-color)"
            :class="[
              detail.answer == 2 && detail.is_show_answer ? 'right-answer' : '',
              radio == 2 ? 'active' : ''
            ]"
            >错误</van-radio
          >
        </van-radio-group>
      </div>
      <div
        class="analysis"
        @click="handleShowExplain"
        v-if="!['1', '2', '3'].includes(testType)"
      >
        <div class="analysis-btn">
          <div class="icon-analysis">
            <img src="/img/mobile/answer_analysis.png" alt="" />
          </div>
          <div>
            <span>查看解析</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value", "detail"],
  components: {},
  data() {
    return {
      radio: ""
    };
  },
  computed: {
    /* 类型（0章节练习 试卷类型 1专项训练 2模拟考试 3真题训练） */
    testType() {
      return this.$route.query.type;
    }
  },
  watch: {
    value: {
      handler(new_val, old_val) {
        if (this.radio !== new_val) {
          this.radio = new_val;
        }
      },
      deep: true
    }
  },
  methods: {
    handleChange() {
      this.$emit("input", this.radio);
      this.$emit("change", this.radio);
    },
    handleShowExplain() {
      this.$emit("handleExplain", this.detail.id);
    }
  },
  created() {
    this.radio = this.value;
  },
  activated() {
    this.radio = this.value;
  },
  mounted() {}
};
</script>

<style lang="scss">
.judgment-question {
  width: 6.624rem;
  background-color: #ffffff;
  border-radius: 0.096rem;
  margin: 0.288rem auto 0;
  .question-type-title {
    padding: 0.288rem;
    font-size: 0.2688rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    border-bottom: 0.026rem solid #e3e4e6;
    .t-left {
      color: #4a4b4d;
    }
    .t-right {
      color: var(--theme-color);
    }
  }
  .question-type-content {
    padding: 0.288rem;
    .question-box {
      .question-title {
        color: #4a4b4d;
        font-size: 0.288rem;
      }
      .redio-group-box {
        margin-top: 0.2rem;
        .active {
          color: var(--theme-color);
        }
        .van-radio {
          margin-bottom: 0.2rem;
          font-size: 0.3455rem;
        }
      }
    }
    .analysis {
      display: flex;
      justify-content: flex-end;
      overflow: hidden;
      .analysis-btn {
        display: flex;
        align-items: center;
        color: var(--theme-color);
        // float: right;
        span {
          font-size: 0.2688rem;
          line-height: 0.3264rem;
        }
        .icon-analysis {
          width: 0.3264rem;
          height: 0.3264rem;
          margin-right: 0.15rem;
          // float: left;
          img {
            display: block;
            width: 100%;
            height: 100%;
            background: var(--theme-color);
          }
        }
      }
    }
  }
  .redio-group-box {
    .van-radio__label {
      font-size: 0.288rem;
    }
    .van-radio__icon {
      font-size: 0.288rem;
    }
    .right-answer {
      color: #f39090;
      .van-radio__icon {
        .van-icon {
          background-color: #f39090;
          border-color: #e56262;
          &::before {
            color: #fff;
          }
        }
      }
      .van-radio__label {
        color: #f39090;
      }
    }
    .active {
      color: var(--theme-color);
      .van-radio__icon {
        .van-icon {
          background-color: var(--theme-color);
          border-color: var(--theme-color-darker);
          &::before {
            color: #fff;
          }
        }
      }
      .van-radio__label {
        color: var(--theme-color);
      }
    }
  }
  .van-radio__label {
    color: #4a4b4d;
  }
  .checkbox-group-box {
    .active {
      .van-checkbox__label {
        color: var(--theme-color);
      }
    }
  }
  .van-checkbox__label {
    color: #4a4b4d;
  }
}
</style>
